<template>
  <div>
    <div style="position: relative;" v-if="isShow">
      <div style="background-color: #ffffff;padding-bottom: 10px;">
        <div style="padding:20px 10px 10px;">
          <div>
            <img
              :src="coupon.couponImg || 'https://wld001.oss-cn-nanjing.aliyuncs.com/file/2023/02/16/f2fbed34-247b-4f54-b748-c63304e1e4d7.jpg'"
              alt="">
          </div>
          <div class="price">
            <div class="money">￥</div>
            <div class="yuan">{{ coupon.snapUpMoney }}</div>
            <div class="miaoPirce">秒杀价</div>
            <div class="stock">今日库存：{{ coupon.couponNum }}</div>
          </div>
        </div>
        <div class="ceremony">
          满{{ coupon.fullMoney ? coupon.fullMoney : 0 }}元减{{ coupon.money ? coupon.money : 0 }}
        </div>
      </div>
      <div class="content">
        <div class="message">商品说明</div>
        <div class="activity">
          1、活动抢购时问：{{ coupon.snapUpStartTime ? coupon.snapUpStartTime.substring(0, 10) :
      0
          }}至{{ coupon.snapUpEndTime ? coupon.snapUpEndTime.substring(0, 10) : 0
          }}；具体活动在线时间以页面显示为准，活动期间内用户登录快卫莱电小程序活动链接，访问活动页面参与限时秒杀活动
        </div>
        <div class="activity">
          2、活动区域：全国部分城市（具体以活动页面显示为准）
        </div>
        <div class="activity">
          3、活动内容：
        </div>
        <div class="activitys">
          (1)每日抢购红包券、满减券、直降券、服务费折扣券等;；具体当次抢购商品，以活动页面展示为准。
        </div>
        <div class="activitys">
          (2)满{{ coupon.fullMoney ? coupon.fullMoney : 0 }}元减{{ coupon.money ? coupon.money : 0 }}元优惠券
        </div>
        <div class="activitys">
          (3)每场券数量{{ coupon.couponNum ? coupon.couponNum : 0 }}份，每个时段每人限抢1份；先到先得，抢完为止。
        </div>
        <div class="activitys">
          (4)抢购的红包券、满减券、直降券、服务费折扣券均有
        </div>
        <div class="activity">
          4、其他规则
        </div>
        <div class="activitys">
          (1)活动期间，同一用户限抢1份；
        </div>
        <div class="activitys">
          (2)本活动中的新用户特指未在卫莱电小程序上完成充电消费的用户
        </div>
        <div class="activitys">
          (3)红包券、满减券、直降券、服务费折扣券为特殊数字
          化特惠商品，支付成功后不支持在线退款；
        </div>

        <div class="activitys">
          (4)如有疑向，详情请咨询客服：18758321769
        </div>
      </div>
      <div class="buy">
        <van-button type="primary" block style="width: 90%;margin: 0 auto;" @click="receive">立即领取</van-button>
      </div>
      <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }">
        <van-field v-model="model.phone" label="手机号" style="margin-top: 20px;" placeholder="请输入手机号后领取" />
        <van-button type="primary" block size="small" style="width: 90%;;margin: 0 auto ;margin-top: 10px"
          @click="received">领取</van-button>
      </van-popup>
    </div>
    <van-empty description="此优惠券不可免费领取" v-else />
  </div>
</template>

<script>

import { Dialog } from 'vant';
export default {
  name: 'App',

  data() {
    return {
      show: false,
      model: {
        phone: "",
      },
      messgae: '领取成功',
      coupon: "",
      isShow: true,
      id: "",
      channel: ''
    }
  },
  created() {
    let id = ""
    for (let i = 0; i < this.$router.currentRoute.query.id.length; i++) {
      id += "" + this.getLink(this.$router.currentRoute.query.id.slice(i, i + 1))
    }

    this.channel = this.getChannel(this.$router.currentRoute.query.channel)
    this.getCoupon(id)
  },
  methods: {
    getLink(num) {
      if (num == 'a') {
        num = '1'
      } else if (num == 'c') {
        num = '7'
      } else if (num == 'x') {
        num = '8'
      } else if (num == 'e') {
        num = '2'
      } else if (num == 'f') {
        num = '3'
      } else if (num == 'k') {
        num = '4'
      } else if (num == 'r') {
        num = '5'
      } else if (num == 'm') {
        num = '6'
      } else if (num == 'n') {
        num = '9'
      } else if (num == 'g') {
        num = '0'
      }
      return num
    },
    //发放渠道
    getChannel(num) {
      if (num == 'w') {
        num = 1
      } else if (num == 'z') {
        num = 2
      }
      return num
    },
    getCoupon(id) {
      this.$api.activity_getCoupon(id)
        .then(res => {
          if (res.data.code == 200) {
            this.isShow = true
            this.coupon = res.data.data
          } else if (res.data.code == 203) {
            this.isShow = false
          }
        })
        .catch(error => {
          console.log(error)
        });
    },
    received() {
      let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      this.model.couponId = this.coupon.couponId
      this.model.channel = this.channel
      this.show = false
      if (!reg.test(this.model.phone)) {
        Dialog.alert({
          title: '优惠卷',
          message: '请输入正确的手机号',
        })
      } else {
        this.$api.couponReceive_receiveByPhone(this.model)
          .then(res => {

            Dialog.alert({
              title: '优惠卷',
              message: res.data.msg,
            })
          })
          .catch(error => {
            console.log(error);
          })

      }

    },
    receive() {
      this.show = true
    }
  },

}
</script>

<style>
.buy {
  width: 100%;
  padding: 10px 5px;
  border-top: 1px solid #ffffff;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  color: #479de33f;
}

.activitys {
  text-align: left;
  font-size: 14px;
  color: grey;
  margin-left: 5px;
}

.activity {
  text-align: left;
  font-size: 14px;
  color: grey;
  padding: 2px 0;
}

.message {
  font-weight: bold;
  text-align: left;
  margin-bottom: 20px;
}

.content {
  padding: 20px 10px 20px;
  background-color: #ffffff;
  margin-top: 10px;
  margin-bottom: 70px;
}

.ceremony {
  text-align: left;
  padding-left: 10px;
  font-weight: bold;
  margin-bottom: 10px;
}

body {
  background-color: #f0f2f5;
}

.money {
  font-size: 14px;
  color: red;
  font-weight: bold;
}

.yuan {
  font-size: 22px;
  font-weight: bold;
  color: red;
}

.miaoPirce {
  font-size: 12px;
  background-color: red;
  color: #ffffff;
  padding: 2px 4px;
  margin-left: 10px;
}

.stock {
  font-size: 14px;
  color: grey;
  margin-left: auto;
}

.price {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

img {
  width: 90%;
  height: 120px;
  border-radius: 5px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 30px;
}
</style>